<template>
  <div class="navbar">
      <div class="navbar-left">
          <el-button icon="el-icon-menu" size='mini' @click="changeiscollapse" class="spread"></el-button>
          <span style="color:white">首页</span>
      </div>
      <div class="navbar-right">
            <el-dropdown trigger='click' size="mini">
              <span class="el-dropdown-link">
                  <img :src="userImg" alt="" class="Icon">
              </span>
              <el-dropdown-menu >
                <el-dropdown-item>个人中心 </el-dropdown-item>
                <el-dropdown-item> 退出</el-dropdown-item>               
              </el-dropdown-menu>
            </el-dropdown>
      </div>
  </div>
</template>

<script>
export default {
  name:'navBar',
  data() {
    return {
      // 动态引入 图片
      userImg : require('@/assets/images/z2.jpg'),
      
    }  
  },
  methods: {
    changeiscollapse(){
      console.log('changeiscollapse');
    }
  },
}
</script>

<style scoped>
.navbar{
  /* width: 70%; */
  height: 50px;
  border: 1px solid red;
  display: flex;
  background-color: black;
}

.navbar-left{
  width: 90%;
  height: 100%;
  border: 1px solid green;
  line-height: 50px;
  padding-left: 30px;  
}

.spread{
  vertical-align: middle;
  margin-right: 30px;
}

.navbar-right{
  float: right;
}
 .Icon{
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
</style>